<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>服务管理</title>
  <link rel="shortcut icon" type="image/png" href="/res/images/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="/res/bootstrap-3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/res/font-awesome-4.6.3/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="/res/css/style.css">
</head>

<body id="app">
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">服务管理 <small class="user">[[.User]]</small></a>
        </div>

      </div>
    </div>
  </nav>
  <div class="container">
    <div class="col-md-12">
      <div class="alert alert-danger" role="alert" v-if="!isConnectionAlive">
        <strong>连接丢失</strong> 3s 后重连, 或者 <a href="/" class="alert-link">手动连接</a>
      </div>
    </div>
    <div class="col-md-12">
      <button class="btn btn-default btn-sm" id="launchNewProgram">
        <span class="glyphicon glyphicon-plus"></span> 新程序
      </button>
      <button class="btn btn-default btn-sm" v-on:click="refresh">
        <span class="glyphicon glyphicon-refresh"></span> 刷新
      </button>
      <button class="btn btn-default btn-sm" v-on:click="reload">
        <span class="glyphicon glyphicon-repeat"></span> 重载
      </button>


    </div>
    <div class="col-md-12">
      <table class="table table-hover">
        <thead>
          <tr>
            <td>名称</td>
            <td>状态</td>
            <td>查看</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="p in programs">
            <td v-text="p.program.name"></td>
            <td v-html="p.status | colorStatus"></td>
            <td>
              <button class="btn btn-default btn-xs" v-on:click="cmdTail(p.program.name)">
                <span class="fa fa-file-text-o"></span> 日志
              </button>
              <button class="btn btn-default btn-xs" :disabled="!canStop(p.status)" @click="gotoStatus(p.program.name)">
                <span class="fa fa-bar-chart"></span> 状态
              </button>

              <button class="btn btn-default btn-xs" data-toggle="tooltip" title="{{p.program.command}}">
                <span class="glyphicon glyphicon-info-sign"></span> 信息
              </button>

              <button class="btn btn-default btn-xs" v-on:click="cmdNotify(p.program.name)">
                <span class="glyphicon glyphicon-bullhorn"></span> 通知
              </button>
            </td>
            <td>
              <button v-on:click="cmdStart(p.program.name)" class="btn btn-default btn-xs"
                :disabled='["运行中", "停止中"].indexOf(p.status) != -1'>
                <span class="glyphicon glyphicon-play"></span> 启动
              </button>
              <button class="btn btn-default btn-xs" v-on:click="cmdStop(p.program.name)"
                :disabled="!canStop(p.status)">
                <span class="glyphicon glyphicon-stop"></span> 停止
              </button>
              <button v-on:click="showEditProgram(p.program)" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-edit"></span> 编辑
              </button>
              <button class="btn btn-default btn-xs" v-on:click="cmdDelete(p.program.name)">
                <span class="color-red glyphicon glyphicon-trash"></span> 删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-12">
      <div id="footer" class="pull-right" style="margin: 2em 1em">
        <a href="https://github.com/kirileec/gosuv">服务管理1.0</a>, update by <a href="https://github.com/kirileec">linx</a>. 2020
      </div>
    </div>
    <!-- panels -->
    <!-- modals -->

    <div class="modal" id="newProgram">
      <div class="modal-dialog">
        <div class="modal-content">
          <form id="formNewProgram" action="/api/programs" method="post">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">新程序</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label>名称</label>
                <input type="text" name="name" v-model="program.name" class="form-control"
                  placeholder="name (must be unique)" required>
              </div>
              <div class="form-group">
                <label>命令</label>
                <input type="text" name="command" class="form-control"
                  placeholder="shell command, ex: redis-server --port 6379">
              </div>
              <div class="form-group">
                <label>环境变量</label>
                <input type="text" name="environ" class="form-control" placeholder="Environment, ex: LD_LIB=ABC;">
              </div>
              <div class="form-group">
                <label>目录</label>
                <input type="text" name="dir" class="form-control" placeholder="directory, default is /">
              </div>
              <div class="form-group">
                <label>用户</label>
                <input type="text" name="user" class="form-control" placeholder="user, optional">
              </div>
              <div class="form-group">
                <label>失败重试</label>
                <input style="max-width: 5em" type="number" name="retries" class="form-control" min="0" step="1"
                  value="3">
              </div>
              <div class="checkbox">
                <label>
                  <input name="autostart" type="checkbox"> 自动启动(本服务启动后随后启动)
                </label>
              </div>
              <!-- <button type="submit" class="btn btn-Wdefault">Submit</button> -->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary">添加程序</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- model edit -->
    <div class="modal" id="programEdit">
      <div class="modal-dialog">
        <div class="modal-content">
          <form v-on:submit.prevent="editProgram">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> <span
                  v-text="edit.program.name"></span></h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label>命令</label>
                <input type="text" name="command" class="form-control" v-model="edit.program.command">
              </div>
              <div class="form-group">
                <label>环境变量</label>
                <input type="text" name="environ" class="form-control" v-model="edit.program.environ">
              </div>
              <div class="form-group">
                <label>目录</label>
                <input type="text" name="dir" class="form-control" v-model="edit.program.directory">
              </div>
              <div class="form-group">
                <label>用户</label>
                <input type="text" name="user" class="form-control" v-model="edit.program.user">
              </div>
              <div class="form-group">
                <label>失败重试</label>
                <input style="max-width: 5em" type="number" name="retries" class="form-control" min="0" step="1"
                  v-model="edit.program.startRetries">
              </div>
              <div class="checkbox">
                <label>
                  <input name="autostart" type="checkbox" v-model="edit.program.startAuto"> 自动启动(本服务启动后随后启动)
                </label>
              </div>
              <!-- <button type="submit" class="btn btn-Wdefault">Submit</button> -->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary">更新</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- /.modal -->
    <div class="modal" id="modalTailf">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form id="formNewProgram" action="/api/programs" method="post">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">实时日志</h4>
            </div>
            <div class="modal-body">
              <p>行数: {{log.line_count}}</p>
              <pre v-html="log.content" class="realtime-log"></pre>
              <div class="checkbox text-right">
                <label>
                  <input v-model="log.follow" type="checkbox"> 跟随
                </label>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="modal" id="modalNotify">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form id="formEditNotify">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">{{mynotify.name}}通知设置(异常退出或进程被杀时)</h4>

            </div>

            <div class="modal-body">
              <div class="form-group">
                <div class="checkbox text-left">
                  <label>
                    <input v-model="mynotify.enable" type="checkbox"> 启用Bark
                  </label>
                </div>
              </div>

              <div class="form-group">
                <label>推送用户的key(以英文逗号 , 分隔多个key)</label>
                <button class="btn btn-default btn-xs" data-toggle="tooltip" title="填写https://api.day.app/ 后面的那一串">
                  <span class="glyphicon glyphicon-question-sign"  ></span> 帮助
                </button>
                <input type="text" class="form-control" v-model="mynotifyusers">
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" v-on:click="editNotify" class="btn btn-primary">保存</button>
            </div>

          </form>
        </div>
      </div>
    </div>



  </div>
  <!-- polyfill make browser support ECMAScript 6th edition -->
  <script src="/res/js/promise-polyfill.min.js"></script>
  <script src="/res/js/jquery-3.1.0.min.js"></script>
  <script src="/res/bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script src="/res/js/moment.min.js"></script>
  <script src="/res/js/underscore-min.js"></script>
  <script src="/res/js/vue-1.0.min.js"></script>
  <script src="/res/js/common.js"></script>
  <script src="/res/js/index.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#launchNewProgram").click(function () {
        $("#newProgram").modal({
          show: true,
          backdrop: 'static',
        })
      });
    });
  </script>
</body>

</html>